<template>
	<view class="m-page">
		<view class="m-msg">
			<textarea class="textarea" placeholder="输入您的意见" v-model="content"></textarea>
		</view>
		<view class="m-contact">
			<input type="text" placeholder="联系方式" v-model="contact" />
		</view>
		<view class="m-but">
			<button @click="saveFeedback">提交</button>
			<!-- <button  formType="submit">提交</button> -->
		</view>
		<view class="m-shuom">
			<text>作为我们的用户，我们很重视您的宝贵意见</text>
		</view>
		<view class="m_footer">
			<button class="m_footer_but1" open-type="contact">在线客服</button>
			<button class="m_footer_but2" @tap="gotoReply">反馈列表</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				contact: "",
				content: ""
			}
		},
		onLoad() {

		},
		methods: {
			gotoReply() {
				uni.navigateTo({
					url: "/pages/my/reply"
				})
			},
			saveFeedback() {
				const that = this
				uni.request({
					// url:'http://47.94.164.187:9001/api/content/save/',
					url: 'http://127.0.0.1:9001/api/back/save',
					method: 'POST',
					data: {
						content: that.content,
						contact: that.contact
					},
					header: {
						token: uni.getStorageSync('token')
					},
					success: (res) => {
						// console.log(res)
						if (res.data.code === 200) {
							uni.showToast({
								title: '感谢您的反馈',
								success: (res) => {
									that.content = "";
									that.contact = "";
								}
							})
						} else if (res.data.code === 405) {
							uni.showToast({
								title: res.data.msg,
								image: "/static/error.png"
							})
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.m-page {
		background-color: #fff;
		padding: 30rpx;
		min-height: 100vh;

		.m-msg {
			border: 1px solid #ccc;
			height: 300rpx;
			border-radius: 20rpx;
			margin-bottom: 30rpx;

			.textarea {
				padding: 20rpx;
				width: 100%;
				height: 100%;
			}
		}

		.m-contact {
			border: 1px solid #ccc;
			padding: 20rpx;
			border-radius: 20rpx;
			margin-bottom: 30rpx;
			display: flex;
			align-items: center;
		}

		.m-but {
			button {
				width: 360rpx;
				border-radius: 60px;
				background-color: #ED1C24;
				color: #FFFFFF;
			}
		}

		.m-shuom {
			font-size: 25rpx;
			text-align: center;
			margin-top: 40rpx;
			// color: #;
			color: #b3bdbf;
			border-bottom: 1px solid;
			padding-bottom: 40rpx;
		}

		.m_footer {
			text-align: center;
			margin: auto;
			padding-top: 60rpx;
			display: flex;

			.m_footer_but1 {
				border-radius: 60rpx;
				border: 1px solid #39B54A;
				color: #39B54A;
			}

			.m_footer_but2 {
				border-radius: 60rpx;
				border: 1px solid #9C26B0;
				color: #9C26B0;
			}
		}


	}
</style>
